<template>
  <div>
    <div ref="blockT">
      <mt-header fixed title="团体赛报名">
        <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
      </mt-header>
      <div style="height:40px;"></div>
      <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
      <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>   
      <step current=4 :stepArr="stepArr"></step>  
      <div class="cf p10"><span class="fl f16 fwb mt5">报名预览</span></div>
    </div>
    <div  class="team-content" style="overflow: auto;" ref="listContent">
      <div class="my-field mt0" >
        <div class="my-field-item">
          <span class="my-field-item-l gray6">队伍名称</span>
          <span class="my-field-item-r" to="">长沙芙蓉羽毛球队</span> 
        </div>
        <div class="my-field-item">
          <span class="my-field-item-l gray6" style="flex: 2;">领队</span>
          <span class="my-field-item-r" to="">东方不败</span> 
          <span class="my-field-item-r" to="">13512345678</span> 
        </div>
        <div class="my-field-item">
          <span class="my-field-item-l gray6" style="flex: 2;">教练</span>
          <span class="my-field-item-r" to="">岳不群</span> 
          <span class="my-field-item-r" to="">13512345678</span> 
        </div>
        <div class="my-field-item">
          <span class="my-field-item-l gray6" style="flex: 2;">总计</span>
          <span class="my-field-item-r" to="">8人</span> 
          <span class="my-field-item-r" to="">￥800元</span> 
        </div>
      </div>

      <ul class="team-list">
        <li v-for="(item, index) in list" class="reg">            
          <div class="team-item-num"><i>{{index + 1}}</i></div>
          <div class="team-item-in">
            <div class="team-item-in-line">
              <div class="team-item-c"> 
                <span style="flex:1">{{ getCertName(item.certType) }}</span>
                <span style="flex:1">{{item.certNo}}</span>
              </div>
              <div class="team-item-c"> 
                <span style="flex:1">{{item.name}}</span>
                <span style="flex:1">{{item.size}}</span>
                <span style="flex:2">{{item.mobile}}</span>
              </div>
              <div class="team-item-c">       
                <span style="flex:1">{{item.age}}岁</span>
                <span style="flex:1">{{ getSexName(item.sex) }}</span>
                <span style="flex:2">￥{{ item.money }}元</span>
              </div>
            </div>
          </div>
        </li>
      </ul> 
    </div>
    <div style="display: flex; padding: 10px;" ref="blockB">
      <mt-button style="flex:1;" class="mr10" @click='$router.push("/enroll/group/step3")' plain type="primary">上一步</mt-button>
      <mt-button style="flex:1;" @click='$router.push("/enroll/group/step5")' type="primary">下一步</mt-button>
    </div> 
  </div>
</template>

<script>
import step from '@/components/step'
import popupAge from '@/components/popupAge'
import popupRadio from '@/components/popupRadio'
export default {
  components:{
    step,popupAge,popupRadio
  },
  data () {
    return {
      stepArr:['选择俱乐部','队伍信息','选择队员','报名预览','支付完成'],
      certList:[{value:"1",name:"身份证"},{value:"2",name:"学生证"},{value:"3",name:"港澳通行证"},{value:"4",name:"护照"}],
      sexArr:[{value:'male',name:'男'},{value:'female',name:'女'}],
      list:[
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'},
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'},
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'},
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'},
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'},
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'},
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'},
         {'certType':'1','certNo':'430456198810025462','name':'张三','age':'24','sex':'male','mobile':'1394563245','size':'加大','money':'100'}
      ]
    }
  },
  mounted(){
    this.$refs.listContent.style.maxHeight = document.documentElement.clientHeight - this.$refs.blockT.offsetHeight - this.$refs.blockB.offsetHeight + "px";
  },
  methods:{
    getCertName(t){
      var arr = this.certList;
      var str = '';
      for (var i = 0; i < arr.length; i++) {
        if(arr[i]["value"] == t){
          str = arr[i]["name"];
        }
      }
      return str;
    },    
    getSexName(t){
      var arr = this.sexArr;
      var str = '';
      for (var i = 0; i < arr.length; i++) {
        if(arr[i]["value"] == t){
          str = arr[i]["name"];
        }
      }
      return str;
    }
  }
}
</script>
